<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-box">
      <h3 class="login-title">系统登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="loginForm.username" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" auto-complete="off"></el-input>
      </el-form-item>
      <!--      <el-checkbox v-model="checked" class="rememberAccount" :loading="loginSuccess">记住账号</el-checkbox>-->
      <!--      <el-checkbox v-model="checked" class="rememberPassword" :loading="loginSuccess">记住密码</el-checkbox>-->
      <el-form-item style="width:100%;">
        <el-button class="loginButton" type="primary" style="width:100%;" @click="onSubmit('loginForm')" >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name : 'Login',
  data(){
    return {
      loginSuccess : false,
      loginForm : {
        username : 'admin',
        password : '123456',
      },
      // 表单验证，在el-form-item元素中添加prop属性
      rules : {
        username : [{
          required : true,
          message : '账号不可为空',
          trigger : 'blur',
        }],
        password : [{
          required : true,
          message : '密码不可为空',
          trigger : 'blur',
        }],
        // 对话框显示与隐藏
        dialogVisible : false,
        checked : false,
      }
    }
  },
  methods: {
    onSubmit() {
      // 为表单绑定验证功能
      this.$refs.loginForm.validate((valid) => {
        if(valid) {
          // 使用vue-router路由到指定页面，该方式称之为编程式导航
          this.loginSuccess = true;
          //this.$router.push('/main');
          if(this.loginForm.username === 'admin' &&
            this.loginForm.password === '123456'){
            console.log("密码正确");
            this.loginSuccess = false;
            sessionStorage.setItem('user', this.loginForm.username);
            // 登录成功，进入main页面
            this.$router.push({path: '/choose'});
          }else{
            this.loginSuccess = false;
            this.$alert('账号或密码错误', '警告', {
              confirmButtonText: 'ok'
            })
          }
        }else{
          this.dialogVisible = true;
          console.log('error submit!');
          return false;
        }
      })
    }
  }
};
</script>
<!--lang="scss"hui bao cuo!-->
<style lang="css" scoped>
.login-container {
  width: 100%;
  height: 100%;
}
/*.login-box {*/
/*  border: 1px solid #DCDFE6;*/
/*  width: 350px;*/
/*  margin: 180px auto;*/
/*  padding: 35px 35px 15px 15px;*/
/*  border-radius: 5px;*/
/*  -webkit-border-radius: 5px;*/
/*  -moz-border-radius: 5px;*/
/*  box-shadow: 0 0 25px #909399;*/
/*}*/
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.label.el-checkbox.rememberAccount {
  text-align: left;
}
.label.el-checkbox.rememberPassword {
  text-align: right;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
.loginButton {
  text-align: center;
  position: center;
}
</style>
